<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원가입</title>
<script type="text/javascript" src="/Beeer/script/jquery.js"></script>
<script type="text/javascript">
var flag;
$(document).ready(function(){
	var id;
	var pw;
	var email;
	
	//id 체크
	$("#id").on("keyup", function(){
		//글자수 체크(6자 이상)
		id = $("#id").val();
		if(id.length<6){
			$("#idCheck").html("아이디는 6자 이상입니다.");
			flag = false;
		}
		if(id.length>=6){
			$("#idCheck").html("");
			flag=true;
			//중복체크
			$.ajax({
				type: "POST",
				url: "/Beeer/member/id_check.do",
				data: {"id":id},
				dataType: "JSON",
				beforeSend:function(){},
				success:function(chk){
					//alert(chk.duplicate);
					if(!chk.duplicate){
						$("#idCheck").html("Welcome!");
					}else{
						$("#idCheck").html("사용중인 아이디입니다. 다른 아이디를 사용해 보세요.");
					}
				},
				error:function(){
					alert(xhr.status+"-"+xhr.statusText);
				}	
			});
		}//end of ajax
	});
	
	//Password 체크
	$("#password").on("keyup", function(){
		//글자수 체크(6자 이상)
		pw = $("#password").val();
		if(pw.length<6){
			$("#passwordCheck").html("비밀번호는 6자 이상입니다.");
			flag=false;
		}
		if(pw.length>=6){
			$("#passwordCheck").html("반갑습니다.");	
			flag=true;
		}
	});
	
	//email 체크
	$("#email").on("keyup", function(){
		//글자수 체크(6자 이상)
		email = $("#email").val();
		$("#emailCheck").html(emailCheck(email));
		
	});
	
	//submit 가입처리
	$("#submit").on("click", function(){
		alert(flag);
		if(!flag){
			alert("가입 정보를 다시 확인해 주세요.");
			return false;
		}
	});
	
});

//e-mail check 정규식 : 구글 참고
function emailCheck(email){    
	email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
	if(!email_regex.test(email)){
		flag = false;
		return "정확한 메일 계정이 필요합니다.";
	}else{
		flag=true;
		return "가입버튼만 누르면!";
	}
	}
</script>
<style type="text/css">
body{
	height: 100%;
	background-image: url("/Beeer/image_for_UI/bgimage.jpg");
	background-repeat  : no-repeat;
	background-size: 100%;
}
#joinForm tr td{
	text-align: center;
}
</style>
</head>
<body>
<center>
<h2>회원가입</h2>
<form action="${initParam.rootPath }/member/join.do" method="post">
	<table id="joinForm">
		<tr>
			<td>ID </td>
			<td><input type="text" id="id" name="memberId" maxlength="15" autofocus></td>
			<td id="idCheck"></td>
		</tr>
		<tr>
			<td>PW </td>
			<td><input type="password"  id="password" name="memberPassword" maxlength="15"></td>
			<td id="passwordCheck"></td>
		</tr>
		<tr>
			<td>Email </td>
			<td><input type="text" id="email" name="email"></td>
			<td id="emailCheck"></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" id="submit" value="가입"></td>
		</tr>
		
	</table>
</form>
</center>
</body>
</html>